<div class="login">
    <div class="login-bg">
        <div class="language-box" #languagebox (focus)="onShow()" (blur)="onHide()" tabindex="1">
            <a >
                <img *ngIf="lang.lang === 'zh'"  src="../../../assets/icons/Country/china.png" />
                <!-- <img *ngIf="lang.lang === 'en'" src="../../../assets/icons/Country/en.png" /> -->
                <img *ngIf="lang.lang === 'jp'" src="../../../assets/icons/Country/jp.png" />
            </a>
            <div class="language-select" [hidden]="!langShow">
                <div (click)="changeLang('zh')"><img src="../../../assets/icons/Country/china.png" /></div>
                <!-- <div (click)="changeLang('en')"><img src="../../../assets/icons/Country/en.png" /></div> -->
                <div (click)="changeLang('jp')"><img src="../../../assets/icons/Country/jp.png" /></div>
            </div>
        </div>
        <img src="../../../assets/images/login-page/APO.png" alt="">
    </div>
    <div class="login-body">
        
        <div class="form-databody white-input">
            <form *ngIf='isEmail' [formGroup]="registerEmailForm" (ngSubmit)="onSave(registerEmailForm)">

                <div class="weui-cell weui-cell_vcode" style="border-bottom: 0.1rem solid #808080;">
                    <div class="weui-cell__hd" style="width: 4rem;"><label class="weui-label"><img style="width: 2.5rem;" src="../../../assets/images/login-page/user-icon.png" alt=""></label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="text" placeholder="{{'registerPage.input-mail' | translate}}"
                            formControlName="email" autocomplete="off"  />
                    </div>
                    <div class="weui-cell__ft"
                        *ngIf='!registerEmailForm.controls.email.valid && registerEmailForm.controls.email.dirty'>
                        <i style="width: 2rem;margin-left: 1rem;" class="weui-icon-warn"></i></div>
                </div>

                <div class="weui-cell weui-cell_vcode" style="border-bottom: 0.1rem solid #808080;">
                    <div class="weui-cell__hd" style="width: 4rem;"><label class="weui-label"><img style="width: 2.5rem;" src="../../../assets/images/login-page/pws-icon.png" alt=""></label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="password"
                            placeholder="{{'loginPage.input-password' | translate}}" formControlName="password"
                            autocomplete="off"  />
                    </div>
                    <div class="weui-cell__ft" *ngIf='registerEmailForm.errors?.newConfirmPasswordError'><i
                            style="width: 2rem;margin-left: 1rem;" class="weui-icon-warn"></i></div>
                </div>
                <div class="login-to-register">
                    <a (click)="onChangType(false)">{{'loginPage.html4' | translate}}</a>
                    <a style='margin: auto;
                    margin-right: 0;' routerLink="/updatePwd/3">{{'loginPage.forget-password' | translate}}</a>
                </div>
               
                <div class="register-subbtn">
                    <button weui-button disabled='{{!registerEmailForm.valid}}'>{{'login' | translate}}</button>
                    <button style=" color: #fff;
                    border: 1px solid rgba(255,255,255,1);
                    border-radius:2.75rem;background: none;
                    padding: 1rem;margin-top: 2rem"  routerLink="/register">{{'register' | translate}}</button>
                </div>

            </form>

            <form *ngIf='!isEmail' [formGroup]="registerMobileForm" (ngSubmit)="onSave(registerMobileForm)">

                <div class="weui-cell weui-cell_vcode weui-cell_select" style="border-bottom: 0.1rem solid #808080;">
                    <div class="weui-cell__hd" style="width: 4rem;"><label class="weui-label"><img style="width: 2.5rem;    margin-left: 2rem;" src="../../../assets/images/login-page/user-icon.png" alt=""></label></div>
                    <div class="weui-cell__hd">
                        <select class="weui-select" formControlName="phoneId" name="phoneId">
                            <option *ngFor="let item of selData" value="{{item.id}}">{{item.name}}</option>
                        </select>
                    </div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="tel" placeholder="{{'registerPage.input-phone' | translate}}"
                            formControlName="mobile" autocomplete="off"  maxlength='11' />
                    </div>
                    <div class="weui-cell__ft"
                        *ngIf='!registerMobileForm.controls.mobile.valid && registerMobileForm.controls.mobile.dirty'>
                        <i style="width: 2rem;margin-left: 1rem;" class="weui-icon-warn"></i>
                    </div>
                </div>

                <div class="weui-cell weui-cell_vcode" style="border-bottom: 0.1rem solid #808080;">
                    <div class="weui-cell__hd" style="width: 4rem;"><label class="weui-label"><img style="width: 2.5rem;" src="../../../assets/images/login-page/pws-icon.png" alt=""></label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="password"
                            placeholder="{{'loginPage.input-password' | translate}}" formControlName="password"
                            autocomplete="off"  />
                    </div>
                    <div class="weui-cell__ft" *ngIf='registerMobileForm.errors?.newConfirmPasswordError'><i
                            style="width: 2rem;margin-left: 1rem;" class="weui-icon-warn"></i></div>
                </div>
                <div class="login-to-register">
                    <a (click)="onChangType(true)">{{'loginPage.html3' | translate}}</a>
                    <a style='margin: auto;
                    margin-right: 0;' routerLink="/updatePwd/3">{{'loginPage.forget-password' | translate}}</a>
                </div>
                <div class="register-subbtn">
                    <button weui-button disabled='{{!registerMobileForm.valid}}'>{{'login' | translate}}</button>
                    <button style=" color: #fff;
                    border: 1px solid rgba(255,255,255,1);
                    border-radius:2.75rem;background: none;
                    padding: 1rem;margin-top: 2rem"  routerLink="/register">{{'register' | translate}}</button>
                </div>
            </form>

        </div>
    </div>
</div>